<template>
  <div class="top-container">
    <div class="left-box">
      <h1 class="logo">
        <a href="#"></a>
      </h1>
    </div>
    <div class="sreen-box">
       <div class="icon-wrapper">
        <span class="iconfont icon-home" @click="toHomeClick()"></span>
        <!-- <span class="iconfont icon-sami-select"></span> -->
        <span class="iconfont icon-full-screen" @click="getFullCreeen(btnStatus)"></span>
      </div>
    </div>
    <div class="center-box">
      <div class="el-input el-input--small el-input--prefix">
        <input type="text" autocomplete="off" placeholder="搜索" v-model="inputVal" @keyup.enter="toResult" class="el-input__inner" />
        <span class="el-input__prefix">
          <i class="el-input__icon el-icon-search"></i>
        </span>
      </div>
    </div>
    <div class="right-box">
     <div class="right-menu" v-if="name">
        <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          {{ name }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">黄金糕</el-dropdown-item>
          <el-dropdown-item command="b">狮子头</el-dropdown-item>
          <el-dropdown-item command="c" @click.native="layout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
     </div>
      <div v-else class="no-login" @click="visible = true">未登录</div>
    </div>
    <!-- 登录 -->
    <el-dialog title="登录" :visible.sync="visible" append-to-body width="500px" top="20vh">
      <div class="login-box">
        <ul class="login-tabs">
                <li class="login-account" :class="num === 1 || num === 2 ? 'active' : ''" @click="handleMe(1)">账号登录</li>
                <li class="login-wx" :class="num === 3 ? 'active' : ''"  @click="handleMe(3)">扫码登录
                  <!-- <img class="wxqr" src="//img02.hua.com/pc/assets/img/pc_login_qr.png" alt="">  -->
                </li>
        </ul>
         <div class="login-from" v-show="num === 1">
          <el-form ref="formlogin" :model="form" :rules="rules" label-width="80px">
            <el-form-item>
              <!-- <div @click="num = 2">手机验证码登录</div> -->
            </el-form-item>
            <el-form-item prop="phone">
              <el-input v-model="form.phone" tabindex="6" name="phone" auto-complete="on" placeholder="用户名" style="width: 312px">
                  <template slot="prefix"><i class="el-icon-mobile-phone" /></template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password" type="password" tabindex="6" name="password" auto-complete="on" placeholder="密码" style="width: 312px">
                  <template slot="prefix"><i class="el-icon-lock" /></template>
                </el-input>
            </el-form-item>
            <el-form-item>
              <div @click="handleLogin" class="login-btn" style="width: 312px">登录</div>
            </el-form-item>
          </el-form>
        </div>
        <div v-show="num === 2">
           <el-form ref="login" :model="form" :rules="rules" label-width="80px">
              <el-form-item prop="phone">
                <el-input v-model="form.phone" tabindex="6" name="phone" auto-complete="on" placeholder="用户名" style="width: 312px">
                    <template slot="prefix"><i class="el-icon-mobile-phone" /></template>
                  </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="form.code" tabindex="6" name="code" auto-complete="on" placeholder="验证码" style="width: 312px">
                    <div slot="append" style="display:flex;align-items:center;justify-content:space-between;width: 120px;text-align:center;">
                     <p @click="getCode" style="width:100px; cursor: pointer;">获取验证码</p>
                    </div>
                  </el-input>
              </el-form-item>
              <el-form-item>
                <div @click="handleLogin" class="login-btn" style="width: 312px">登录</div>
              </el-form-item>
          </el-form>
        </div>
        <div v-show="num === 3">
          <div class="login-qre">
          </div>
        </div>
      </div>
       <!-- <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="visible = false">确 定</el-button>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters  } from "vuex"
import { login, logKey, loginCode, loginCodeIn } from '@/api/index.js'
export default {
  name: 'top',
  data() {
    return {
      visible: false,
      show: this.$store.state.userShow,
      query: '',
      inputVal: '',
      n: 0,
      btnStatus: 0,
      num: 1,
      nickname: null,
      key:null,
      form: {
        phone: 13767218092,
        password: 'qaq13767219092xx',
        code: null
      },
      rules: {
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
       }
    }
  },
   computed: {
    ...mapState(["name", 'userShow']),
    ...mapGetters(['getShow'])
  },
  created() {
    // this.getKey()
  },
  methods: {
    getKey() {
      logKey().then(res => {
        console.log(res)
      })
    },
    handleMe(val) {
     this.num = val
    },
    handleLogin() {
        this.$refs.formlogin.validate((valid) => {
          if (valid) {
            login(this.form).then(res => {
              let { token, profile } = res
              this.visible = false
              this.$store.dispatch('SET_TOKEN', token)
              this.$store.dispatch('SET_NAME', profile.nickname)
              this.$message.success('登录成功')
            })
          } else {
            console.log('error submit!!')
            return false;
          }
        })
    },
    layout() {
       this.$store.dispatch('LOG_OUT')
    },
    getCode() {
        loginCode(this.form).then(res => {
          console.log(res)
        })
    },
    toResult() {
      if (this.inputVal === '') {
        // 提示用户
        this.$message.warning('请输入内容!')
      } else {
        // 携带数据去搜索页面
        this.$router.push(`/result?q=${this.inputVal}`)
      }
    },
    toHomeClick() {
      if ('/discovery' === this.$route.path) {
        return
      }
      this.$router.push(`/discovery`)
    },
    //  点击实现全屏和退出全屏
    getFullCreeen(btnStatus) {
      this.btnStatus = this.btnStatus === 0 ? 1 : 0
      this.n++
      this.n % 2 == 0 ? this.outFullCreeen(document) : this.inFullCreeen(document.documentElement)
    },

    inFullCreeen(element) {
      let el = element
      let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen
      if (typeof rfs != 'undefined' && rfs) {
        rfs.call(el)
      } else if (typeof window.ActiveXObject != 'undefined') {
        let wscript = new ActiveXObject('WScript.Shell')
        if (wscript != null) {
          wscript.SendKeys('{F11}')
        }
      }
    },

    outFullCreeen(element) {
      let el = element
      let cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen
      if (typeof cfs != 'undefined' && cfs) {
        cfs.call(el)
      } else if (typeof window.ActiveXObject != 'undefined') {
        let wscript = new ActiveXObject('WScript.Shell')
        if (wscript != null) {
          wscript.SendKeys('{F11}')
        }
      }
    },
    handleCommand() {}
  }
}
</script>

<style lang="scss" scoped>
.top-container {
    // display: flex;
    padding: 0 20px;
    background-color: #C20C0C;
    width: 100%;
    .left-box {
        float: left;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon-wrapper {
            margin-right: 80px;
            .iconfont {
                margin-right: 10px;
                font-size: 12px;
                width: 18px;
                height: 18px;
                display: inline-block;
                text-align: center;
                line-height: 18px;
                &::before {
                    opacity: 0;
                    transition: 0.2s;
                }
                &:hover {
                    &::before {
                        opacity: 1;
                    }
                }
                &.icon-home {
                    background-color: #dd6d60;
                    border-radius: 50%;
                }
                &.icon-sami-select {
                    background-color: #dcc060;
                    border-radius: 50%;
                }
                &.icon-full-screen {
                    background-color: #84bb58;
                    border-radius: 50%;
                }
            }
        }
        .history-wrapper {
            display: flex;
            align-items: center;
            .iconfont {
                width: 35px;
                height: 35px;
                font-size: 30px;
                text-align: center;
                line-height: 35px;
                color: gray;
                border-radius: 50%;
                transition: 0.2s;
                cursor: pointer;
                &:first-child {
                    margin-right: 10px;
                }
                &:hover {
                    background-color: #ebebeb;
                }
            }
        }
        .logo{
          width: 176px;
          height: 60px;
          line-height: 60px;
          background: url('../assets/topbar.png') no-repeat 0 -6px;
        }
    }
    .center-box{
      position: absolute;
      right: 10%;
      top: 15px;
      display: flex;
      align-items: center;
    }
     .sreen-box {
       padding-left: 20px;
        float: left;
        display: flex;
        align-items: center;
        height: 60px;
        line-height: 65px;
        justify-content: center;
        .icon-wrapper {
            margin-right: 80px;
            .iconfont {
                margin-right: 10px;
                font-size: 12px;
                width: 18px;
                height: 18px;
                display: inline-block;
                text-align: center;
                line-height: 18px;
                &::before {
                    opacity: 0;
                    transition: 0.2s;
                }
                &:hover {
                    &::before {
                        opacity: 1;
                    }
                }
                &.icon-home {
                    background-color: #dd6d60;
                    border-radius: 50%;
                }
                &.icon-sami-select {
                    background-color: #dcc060;
                    border-radius: 50%;
                }
                &.icon-full-screen {
                    background-color: #84bb58;
                    border-radius: 50%;
                }
            }
        }
        .history-wrapper {
            display: flex;
            align-items: center;
            .iconfont {
                width: 35px;
                height: 35px;
                font-size: 30px;
                text-align: center;
                line-height: 35px;
                color: gray;
                border-radius: 50%;
                transition: 0.2s;
                cursor: pointer;
                &:first-child {
                    margin-right: 10px;
                }
                &:hover {
                    background-color: #ebebeb;
                }
            }
        }
    }
    .right-box {
        float: right !important;
        display: flex;
        align-items: center;
        .no-login{
          line-height: 60px;
          color: #fff;
          cursor: pointer;
          margin-right: 20px;
        }
        .right-menu{
           line-height: 60px;
        }
    }
}
 .el-dropdown-link {
    cursor: pointer;
    color: #fff;
  }

</style>

<style scoped>
.login-box .login-tabs {
    position: relative;
    width: 100%;
    height: 52px;
    border-bottom: 1px solid #E9ECF0;
    padding: 0;
    font-size: 0;
    margin-bottom: 30px;
}
.login-box .login-tabs li {
    position: relative;
    display: inline-block;
    width: 50%;
    height: 100%;
    line-height: 56px;
    font-size: 18px;
    text-align: center;
    color: #232628;
    cursor: pointer;
}
.login-box .login-tabs li.active {
    color: #FF734C;
}
.login-box .login-tabs li .wxqr {
    position: absolute;
    width: 44px;
    height: 44px;
    top: 0;
    right: 0;
}
.login-box .login-tabs li.active::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 2px;
    bottom: 0px;
    left: 50px;
    background: #FF734C;
}
.login-btn {
  background: #FF734C;
  color: #fff;
  border-radius: 24px;
  text-align: center;
  cursor: pointer;
}
.login-qre{
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>


